<template>
  <div class="home" :style="{ 'min-height': minHeight }">
    <div class="head">
      <van-nav-bar title="订单结算" left-arrow>
        <template #left>
          <Back></Back>
        </template>
      </van-nav-bar>
    </div>
    <div class="content-box">
      <div class="sel-address" @click="show = true">
        <div class="cell">
          <van-cell
            is-link
            :title="list.length > 0 ? '选择地址' : '新增地址'"
          />
        </div>
        <div class="address">
          <p>
            <span class="user-name">{{ defaultAddress.name }}</span
            ><span class="user-tel">{{ defaultAddress.tel }}</span
            ><span class="isDefault" v-show="defaultAddress.isDefault == 1"
              >默认</span
            >
          </p>
          <p>{{ defaultAddress.address }}</p>
        </div>
      </div>
      <div class="order-message">
        <div class="title">订单信息</div>
        <OrderItem v-for="(v, i) in orderList" :key="i" :mes="v"></OrderItem>

        <van-empty
          description="没有订单了"
          v-show="orderList.length === 0 ? true : false"
        >
        </van-empty>
      </div>
      <OrderBottom :shopArr="orderList" :time="addTime"></OrderBottom>
    </div>
    <div class="bottom-button">
      <van-button
        size="large"
        color="rgb(12,52,186)"
        round
        @click="showKeyboard = true"
        >立即结算</van-button
      >
    </div>

    <div class="key-box" v-show="showKeyboard">
      <h2 class="key-title">{{ errorInfo }}</h2>
      <van-password-input
        :value="keyNum"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="keyNum"
        :show="showKeyboard"
        @blur="showKeyboard = false"
        @input="inputKey"
      />
    </div>

    <van-action-sheet v-model="show" title="选择地址">
      <div class="content">
        <van-address-list
          v-model="chosenAddressId"
          :list="list"
          default-tag-text="默认"
          @add="onAdd"
          @select="onSelect"
        />
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import OrderBottom from "../components/OrderBottom.vue";
import OrderItem from "../components/OrderItem.vue";
import Back from "../components/Back.vue";
import { Toast } from "vant";
export default {
  name: "OrderSet",
  data() {
    return {
      orderList: [],
      defaultAddress: {},
      addressList: null,
      minHeight: innerHeight + "px",
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: sessionStorage.getItem("userToken"),
      show: false,
      chosenAddressId: "0",
      now: new Date().getTime(),
      list: [],
      sids: null,
      addTime: null,
      keyNum: "",
      defaultKey: "123456",
      showKeyboard: false,
      errorInfo: "请输入支付密码",
    };
  },
  methods: {
    getOrderList(sids) {
      let tokenString = this.tokenString;
      let appkey = this.appkey;
      
      this.axios({
        method: "get",
        url: "http://www.kangliuyong.com:10002/commitShopcart",
        params: {
          appkey,
          tokenString,
          sids,
        },
      })
        .then((res) => {
          
          if (res.data.result.length > 0) {
            this.orderList = res.data.result;
            this.addTime = res.data.result[0].updated_at;
            
          }
        })
        .catch((err) => {
          
        });
    },
    getAddress() {
      let appkey = this.appkey;
      let tokenString = this.tokenString;
      this.axios({
        method: "get",
        url: "http://www.kangliuyong.com:10002/findAddress",
        params: {
          appkey,
          tokenString,
        },
      })
        .then((res) => {
          
          this.addressList = res.data.result;
          let arr = res.data.result;
          arr.forEach((v) => {
            if (v.isDefault) {
              this.defaultAddress = v;
              this.defaultAddress.address =
                v.province === v.city
                  ? `${v.province}${v.county}${v.addressDetail}`
                  : `${v.province}${v.city}${v.county}${v.addressDetail}`;
              
              this.chosenAddressId = v.id;
            }
            this.list.push({
              id: v.id,
              name: v.name,
              tel: v.tel,
              address:
                v.province === v.city
                  ? `${v.province}${v.county}${v.addressDetail}`
                  : `${v.province}${v.city}${v.county}${v.addressDetail}`,
              isDefault: v.isDefault === 1 ? true : false,
              aid: v.aid,
            });
          });

          
        })
        .catch((err) => {
          
        });
    },
    onAdd() {
      
      this.$router.push({ name: "NewAddress" });
    },
    onSelect(item, index) {
      
      this.defaultAddress = item;
      this.show = false;
    },
    settleAccounts() {
      
      if (this.defaultAddress.address) {
        if (this.orderList.length > 0) {
          let appkey = this.appkey;
          let tokenString = this.tokenString;
          let sids = this.sids;
          let phone = this.defaultAddress.tel;
          let address = this.defaultAddress.address;
          let receiver = this.defaultAddress.name;
          let data = `appkey=${appkey}&tokenString=${tokenString}&sids=${sids}&phone=${phone}&address=${address}&receiver=${receiver}&`;
          this.axios({
            method: "post",
            url: "http://www.kangliuyong.com:10002/pay",
            data,
          })
            .then((res) => {
              
              this.$router.push({ name: "Indent" });
            })
            .catch((err) => {
              
            });
        } else {
          Toast.fail("请添加订单");
        }
      } else {
        Toast.fail("请选择地址");
      }
    },
    inputKey(val) {
      this.errorInfo = "请输入支付密码";
      this.keyNum += val;
      
      if (this.keyNum.length === 6) {
        this.showKeyboard = false;
        Toast.loading({
          message: "正在支付中...",
          forbidClick: true,
          duration: 0,
        });
        setTimeout(() => {
          Toast.clear(); //判断密码是否一致
          if (this.keyNum === this.defaultKey) {
            this.keyNum = "";
            this.settleAccounts();
          } else {
            this.keyNum = "";
            Toast("结算失败，密码错误");
          }
        }, 2000);
      }
    },
  },
  created() {
    let sids = this.$route.query.sids;
    this.sids = sids;
    
    this.getOrderList(sids);
    this.getAddress();
  },

  components: {
    Back,
    OrderItem,
    OrderBottom,
  },
};
</script>

<style lang="less" scoped>
.home {
  background-color: rgb(245, 245, 245);
}
.head {
  width: 100%;
  position: sticky;
  top: 0;
}
.content-box {
  padding: 10px 20px;
  margin-bottom: 80px;
  .sel-address {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    .cell {
      padding-right: 224px;
      background-color: #fff;
    }
    .address {
      font-size: 14px;
      padding: 10px 16px;
      background-color: #fff;
      p {
        margin: 6px 0;
      }
      span {
        margin-right: 20px;
      }
      .user-name {
        color: rgb(12, 52, 186);
      }
      .isDefault {
        color: #fff;
        text-align: center;
        padding: 2px 8px;
        background-color: rgb(12, 52, 186);
        border-radius: 10px;
        display: inline-block;
      }
    }
  }
  .order-message {
    margin-top: 20px;
    padding: 10px 0;
    font-size: 14px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: #fff;
    .title {
      padding-left: 16px;
    }
  }
}
.bottom-button {
  width: calc(100% - 20px);
  background-color: #fff;
  padding: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
}
/deep/.van-address-list {
  padding: 0;
}
.content {
  padding: 16px 16px 160px;
}
/deep/.van-address-item__edit {
  display: none;
}
/deep/.van-address-item__tag {
  background-color: rgb(12, 52, 186);
}
/deep/.van-address-item .van-radio__icon--checked .van-icon {
  background-color: rgb(12, 52, 186);
  border-color: rgb(12, 52, 186);
}
/deep/.van-button--danger {
  background-color: rgb(12, 52, 186);
  border-color: rgb(12, 52, 186);
}
.key-box {
  width: 100%;
  position: fixed;
  bottom: 250px;
  background-color: rgb(242, 243, 245);
  z-index: 19;
  .key-title {
    text-align: center;
  }
}
</style>